<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>erp系统</title>
    <!-- Element UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>

        :root {
            --theme-green: #00fa9a;
        }

        .app-container {
            display: flex;
            min-height: 100vh;
            background-color: #f5f7fa;
        }

        .sidebar {
            width: 280px;
            background-color: #ffffff;
            border-right: 1px solid var(--theme-green);
            padding: 20px;
            overflow-y: auto;
        }

        .main-content {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        .title {
            color: #0077aa;
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .form-container {
            width: 70%;
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .textarea {
            width: 100%;
        }
        /* 新增/覆盖：让两行按钮合并成一行，模式选择在最左 */
        .button-group {
            width: 100%;
            display: flex;
            justify-content: space-between; /* 左右两端对齐 */
            align-items: center;
            margin-top: 20px;
        }

        .action-buttons {
            flex-shrink: 0;        /* 防止被压缩 */
        }

        .submit-buttons {
            flex-shrink: 0;        /* 防止被压缩 */
        }
        .loading-container,
        .response-container {
            width: 70%;
            margin-top: 20px;
            box-sizing: border-box;
        }

        .response-card {
            width: 100%;
        }

        .response-header {
            font-size: 1.2rem;
            font-weight: bold;
        }

        .response-content {
            font-family: monospace;
            width: 100%;
        }

        .response-content pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow-wrap: break-word;
            width: 100%;
            max-width: 100%;
            overflow: auto;
            padding: 10px;
            margin: 0;
            background: #f8f8f8;
            border-radius: 4px;
        }

        .chat-item {
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .chat-item:hover {
            background-color: #f0f7ff;
        }

        .chat-item.active {
            background-color: #e1f0ff;
        }

        .chat-title {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .chat-preview {
            font-size: 12px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .new-chat-btn {
            margin-bottom: 20px;
            width: 100%;
        }

        .mode-tag {
            margin-left: 10px;
        }

        .image-preview {
            max-width: 100%;
            max-height: 300px;
            margin-top: 10px;
        }

        .file-upload {
            margin-top: 10px;
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .app-container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid var(--theme-green);
            }

            .form-container,
            .loading-container,
            .response-container {
                width: 90%;
            }

            .title {
                font-size: 2rem;
            }

            .response-content pre {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="app-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <el-button type="primary" class="new-chat-btn" @click="createNewChat">新页面</el-button>
            <div
                    v-for="(chat, index) in chatHistory"
                    :key="index"
                    class="chat-item"
                    :class="{ active: currentChatIndex === index }"
                    @click="switchChat(index)"
            >
                <div class="chat-title">{{ chat.title || '未命名对话' }}
                    <el-tag v-if="chat.mode" size="mini" class="mode-tag">{{ getModeName(chat.mode) }}</el-tag>
                </div>
                <div class="chat-preview">{{ chat.preview || '无内容' }}</div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <div class="header">
                <h1 class="title">欢迎来到erp系统</h1>
            </div>

            <div class="form-container">
                <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" class="form">
                    <el-form-item label-width="1px" label="" prop="field101">
                        <el-input
                                v-model="formData.field101"
                                type="textarea"
                                :placeholder="getPlaceholder()"
                                :maxlength="1000"
                                show-word-limit
                                :autosize="{ minRows: 4, maxRows: 8 }"
                                class="textarea"
                        ></el-input>
                    </el-form-item>

                    <!-- 图片上传区域（仅在图生文模式显示） -->
                    <el-form-item v-if="mode === 'image-to-text'" class="file-upload">
                        <el-upload
                                action="#"
                                :auto-upload="false"
                                :on-change="handleImageChange"
                                :show-file-list="false"
                        >
                            <el-button size="small" type="primary">点击上传图片</el-button>
                            <div slot="tip" class="el-upload__tip">请上传需要分析的图片文件</div>
                        </el-upload>
                        <img v-if="imageFile" :src="imagePreviewUrl" class="image-preview">
                    </el-form-item>

                    <el-form-item size="large" class="button-group">
                        <div class="action-buttons">
                            <el-dropdown @command="handleModeChange" trigger="click">
                                <el-button type="primary">
                                    {{ getModeName(mode) }}<i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="normal">普通模式</el-dropdown-item>
                                    <el-dropdown-item command="deep-thinking">深度思考</el-dropdown-item>
                                    <el-dropdown-item command="web-search">联网搜索</el-dropdown-item>
                                    <el-dropdown-item command="text-to-image">文生图</el-dropdown-item>
                                    <el-dropdown-item command="image-to-text">图生文</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <div class="submit-buttons">
                            <el-button @click="resetForm">重置</el-button>
                            <el-button type="primary" @click="submitForm" :loading="loading">提交</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>

            <div class="loading-container" v-if="loading">
                <el-alert type="info" show-icon :closable="false">
                    请耐心等待，正在处理您的请求...
                </el-alert>
            </div>

            <div class="response-container" v-if="responseData && !loading">
                <el-card class="response-card">
                    <div slot="header" class="response-header">
                        <span>返回结果</span>
                        <el-tag v-if="currentMode" type="info" size="small" style="margin-left: 10px;">
                            {{ getModeName(currentMode) }}
                        </el-tag>
                    </div>
                    <div class="response-content">
                        <img v-if="currentMode === 'text-to-image' && responseData.imageUrl"
                             :src="responseData.imageUrl"
                             class="image-preview">
                        <pre v-else>{{ responseData }}</pre>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</div>

<!-- 引入Vue2、Element-UI、Axios -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    /* 下方脚本保持不变（与之前一致） */
    new Vue({
        el: '#app',
        data: function() {
            return {
                formData: { field101: '' },
                rules: { field101: [] },
                responseData: null,
                loading: false,
                mode: 'normal',
                currentMode: null,
                chatHistory: [],
                currentChatIndex: 0,
                imageFile: null,
                imagePreviewUrl: ''
            };
        },
        created() {
            if (this.chatHistory.length === 0) this.createNewChat();
        },
        methods: {
            getModeName(mode) {
                const names = {
                    normal: '普通模式',
                    'deep-thinking': '深度思考',
                    'web-search': '联网搜索',
                    'text-to-image': '文生图',
                    'image-to-text': '图生文'
                };
                return names[mode] || '未知模式';
            },
            getPlaceholder() {
                if (this.mode === 'text-to-image') return '请输入要生成图片的描述文本';
                if (this.mode === 'image-to-text') return '可选：输入关于图片的附加问题或说明';
                return '本产品已全面接入DeepSeek-R1满血版，可对该项目进行智能问答';
            },
            handleModeChange(mode) {
                this.mode = mode;
                this.resetForm();
            },
            handleImageChange(file) {
                this.imageFile = file.raw;
                this.imagePreviewUrl = URL.createObjectURL(file.raw);
            },
            submitForm() {
                this.$refs.elForm.validate(valid => {
                    if (!valid) {
                        this.$message.error('表单验证失败，请检查输入');
                        return;
                    }
                    this.submitData();
                });
            },
            async submitData() {
                this.loading = true;
                this.currentMode = this.mode;
                try {
                    let response;
                    const formData = new FormData();
                    switch (this.mode) {
                        case 'deep-thinking':
                            response = await axios.post('/deepThinking/deepSeek', { query: this.formData.field101 });
                            break;
                        case 'web-search':
                            response = await axios.post('/mcp/chat', { query: this.formData.field101 });
                            break;
                        case 'text-to-image':
                            response = await axios.post('/textToImage/chat', { query: this.formData.field101 });
                            break;
                        case 'image-to-text':
                            formData.append('image', this.imageFile);
                            formData.append('question', this.formData.field101 || '描述这张图片的内容');
                            response = await axios.post('/imageToText/chat', formData, {
                                headers: { 'Content-Type': 'multipart/form-data' }
                            });
                            break;
                        default:
                            response = await axios.post('/normal/chat', { query: this.formData.field101 });
                    }
                    console.log('提交成功', response.data);
                    this.responseData = response.data;
                    this.updateCurrentChat({
                        query: this.formData.field101,
                        response: response.data,
                        mode: this.mode,
                        imageUrl: this.mode === 'text-to-image' ? response.data.imageUrl : null
                    });
                    this.$message.success('提交成功');
                } catch (error) {
                    console.error('提交失败', error);
                    this.$message.error('提交失败，请重试');
                } finally {
                    this.loading = false;
                }
            },
            resetForm() {
                this.$refs.elForm.resetFields();
                this.responseData = null;
                this.imageFile = null;
                this.imagePreviewUrl = '';
            },
            createNewChat() {
                const newChat = {
                    title: '新对话 ' + (this.chatHistory.length + 1),
                    preview: '',
                    queries: [],
                    mode: null
                };
                this.chatHistory.push(newChat);
                this.currentChatIndex = this.chatHistory.length - 1;
                this.resetForm();
                this.mode = 'normal';
            },
            switchChat(index) {
                this.currentChatIndex = index;
                const chat = this.chatHistory[index];
                if (chat.queries.length > 0) {
                    const lastQuery = chat.queries[chat.queries.length - 1];
                    this.formData.field101 = lastQuery.query;
                    this.responseData = lastQuery.response;
                    this.currentMode = lastQuery.mode;
                } else {
                    this.resetForm();
                }
            },
            updateCurrentChat(data) {
                const currentChat = this.chatHistory[this.currentChatIndex];
                currentChat.queries.push(data);
                currentChat.mode = data.mode;
                let previewText = data.query || '';
                if (data.mode === 'image-to-text') previewText = '图片分析: ' + (data.query || '');
                if (data.mode === 'text-to-image') previewText = '生成图片: ' + (data.query || '');
                currentChat.preview = previewText.substring(0, 50) + (previewText.length > 50 ? '...' : '');
                if (currentChat.queries.length === 1) {
                    let title = previewText.substring(0, 20) + (previewText.length > 20 ? '...' : '');
                    if (!title.trim()) title = '未命名对话';
                    currentChat.title = title;
                }
            }
        }
    });
</script>
</body>
</html>